<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="../jquery-1.10.2.js"></script>
<script src="../jquery.tmpl.js"></script>
<script src='../knockout-2.3.0.js'></script>

</head>
<body>
	<form action="/someServerSideHandler">
	<p>
		You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>
	<table data-bind="visible: gifts().length > 0">
		<thead>
			<tr>
				<th>Gift name</th>
				<th>Price</th>
				<th></th>
			</tr>
		</thead>
		<tbody data-bind='template: { name: "giftRowTemplate", foreach: gifts }'>
		</tbody>
	</table>
	<button data-bind="click: addGift">
		Add Gift</button>
	<button data-bind="enable: gifts().length > 0" type="submit">
		Submit</button>
	</form>
	<script type="text/html" id="giftRowTemplate">
		<tr>
			<td><input class="required" data-bind="value: name, uniqueName: true"/></td>
			<td><input class="required number" data-bind="value: price, uniqueName: true"/></td>
			<td><a href="#" data-bind="click: function() { viewModel.removeGift($data) }">Delete</a></td>
		</tr>
	</script>
		
	<script>
		var viewModel = {
			gifts: ko.observableArray([
				{ name: "Tall Hat", price: "39.95" },
				{ name: "Long Cloak", price: "120.00" }
			]),
			
			addGift: function () {
				this.gifts.push({ name: "", price: "" });
			},
			
			removeGift: function (gift) {
				this.gifts.remove(gift);
			},

			save: function (form) {
				alert("Could now transmit to server: " + ko.utils.stringifyJson(this.gifts));
				// To transmit to server, write this: ko.utils.postJson($("form")[0], this.gifts);
			}
		};

		ko.applyBindings(viewModel);

		$("form").validate({ submitHandler: function () { viewModel.save() } });
	</script>
</body>
</html>